<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" th:with="blogConfig=${@configTag.getWebConfigByGroup('bobey')}">

<head>
    <th:block th:include="zgblog/blog_include :: blogHeader(title=${blogConfig['oly.web.title']},
keywords=${blogConfig['oly.web.keywords']},
description=${blogConfig['oly.web.description']},
blogConfig=${blogConfig})" />

</head>

<body>
    <th:block th:include="zgblog/blog_include::menu(menus=${@menuTag.getMenuTreeById(76)},blogConfig=${blogConfig})" />
    <!-- 主体部分 -->
    <section class="bobey-main-box">
        <div class="layui-container">
            <!-- login start -->
            <div id="login">
                <p>注册</p>
                <form class="layui-form" id="signupForm" autocomplete="new-password">
                    <div class="layui-form-item">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-block">
                            <input type="text" name="email" lay-verify="required|email" placeholder="请输入邮箱"
                                autocomplete="new-password" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">验证码</label>
                        <div class="layui-input-block">
                            <input type="text" name="emailCode" placeholder="请输入密码" lay-verify="required"
                                autocomplete="new-password" class="layui-input">

                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn layui-btn-normal" id="getEmailCode">获取验证码</button>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="password" required="required" lay-verify="required"
                                placeholder="请输入密码" autocomplete="new-password" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">验证码</label>
                        <div class="layui-input-block">
                            <input type="text" name="validateCode" lay-verify="required|number" placeholder="验证码"
                                autocomplete="off" class="layui-input" id="usercode">
                            <img th:src="@{/captcha/captchaImage(type=${captchaType})}" class="imgcode" width="85%" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn layui-disabled" disabled lay-submit="" lay-filter="register"
                                id="btnSubmit">注册</button>
                        </div>
                    </div>
                </form>
                <fieldset class="layui-elem-field">
                    <legend>使用第三方登录</legend>
                    <div class="layui-field-box">
                        <!--<a href="/register.html" rel="nofollow" class="layui-btn layui-btn-info layui-btn-xs">注册</a>-->
                        <!--<a href="" rel="nofollow" class="layui-btn layui-btn-info layui-btn-xs">QQ登录</a>
                    <a href="" rel="nofollow" class="layui-btn layui-btn-info layui-btn-xs">Github登录</a>-->
                    </div>
                </fieldset>
            </div>
            <!-- login end -->
        </div>

    </section>
    <style>
        /*登录样式*/
        #login {
            width: 350px;
            height: 500px;
            margin: 0 auto;
            background-color: #FFF;
            border-radius: 5px;

        }

        #login p {
            font-size: 32px;
            text-align: center;
            padding: 20px 0;
        }

        #login form {
            padding: 10px;
        }



        #login .layui-form .layui-form-item .layui-input-block {
            margin-left: 80px;
            padding-right: 40px;
        }

        #login .layui-elem-field legend {
            text-align: center;
        }

        #login .layui-field-box {
            text-align: center;
            padding: 20px 0;
        }

        #login .layui-elem-field {
            margin-top: 20px;
            border-bottom: 0;
            border-left: 0;
            border-right: 0;
        }

        #usercode {
            width: 65px;
            margin-right: 10px;
            float: left;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .imgcode {
            width: 88px;
            height: 38px;
        }

        #sendCode {
            padding: 0 10px;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        footer {
            position: fixed;
            bottom: 0;
            width: 100vw;
        }
    </style>
    <!-- 底部导航 -->
    <th:block th:include="zgblog/blog_include::bottom" />
    <th:block th:include="zgblog/blog_include::footer_js" />
    <script src="../static/ajax/libs/validate/jquery.validate.min.js"
        th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
    <script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; </script>
    <script src="../static/ajax/libs/blockUI/jquery.blockUI.js"
        th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
    <script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=4.1.0}"></script>
    <script th:inline="JavaScript">


        layui.use(['element', 'carousel', 'layer', 'form'], function () {
            var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
            var layer = layui.layer;
            var form = layui.form;
            var carousel = layui.carousel;

            $(function () {
                validateKickout();
                $('.imgcode').click(function () {
                    var url = ctx + "captcha/captchaImage?type=" + captchaType + "&s=" + Math.random();
                    $(".imgcode").attr("src", url);
                });
            });
            function validateKickout() {
                if (getParam("kickout") == 1) {
                    layer.alert("<font color='red'>您已在别处登录，请您修改密码或重新登录</font>", {
                        icon: 0,
                        title: "系统提示"
                    },
                        function (index) {
                            //关闭弹窗
                            layer.close(index);
                            if (top != self) {
                                top.location = self.location;
                            } else {
                                var url = location.search;
                                if (url) {
                                    var oldUrl = window.location.href;
                                    var newUrl = oldUrl.substring(0, oldUrl.indexOf('?'));
                                    self.location = newUrl;
                                }
                            }
                        });
                }
            }

            function getParam(paramName) {
                var reg = new RegExp("(^|&)" + paramName + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return decodeURI(r[2]);
                return null;
            }
            var wait = 60, btnSub = $("#btnSubmit");
            function time(btn) {
                if (wait === 0) {
                    btn.attr("disabled", "");
                    btn.html("获取验证码");
                    btn.removeClass("layui-disabled");
                    wait = 60;
                } else {
                    btn.attr("disabled", 'disabled');
                    btn.html(wait + "秒后可获取");
                    btnSub.removeAttr("disabled");
                    btnSub.removeClass("layui-disabled");
                    btn.addClass("layui-disabled");
                    wait--;
                    setTimeout(function () {
                        time(btn);
                    }, 1000);
                }
            };
            $("#getEmailCode").click(function () {
                //验证是否正确输入邮箱
                var emailRex = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                var username = $.common.trim($("input[name='email']").val());
                if (!emailRex.test(username)) {
                    layer.msg("请输入正确邮箱!");
                }
                else {
                    $.ajax({
                        type: "get",
                        url: ctx + "user/sendEmailCode/" + $.common.trim($("input[name='email']").val()),
                        success: function (r) {
                            if (r.code == 0) {
                                time($("#getEmailCode"));
                                layer.msg(r.msg)
                            }
                            else {
                                layer.msg(r.msg);
                            }

                        }
                    });
                }
            })
            function register() {
                var username = $.common.trim($("input[name='email']").val());
                var password = $.common.trim($("input[name='password']").val());
                var validateCode = $("input[name='validateCode']").val();
                var emailCode = $.common.trim($("input[name='emailCode']").val());
                $.ajax({
                    type: "post",
                    url: ctx + "user/register",
                    data: {
                        "email": username,
                        "password": password,
                        "validateCode": validateCode,
                        "emailCode": emailCode
                    },
                    success: function (r) {
                        if (r.code == 0) {
                            /*跳转到博客主页*/
                            location.href = ctx + 'index';
                        } else {
                            $.modal.closeLoading();
                            $('.imgcode').click();
                            $(".code").val("");
                            $.modal.msg(r.msg);
                        }
                    }
                });
            }
            //监听提交
            form.on('submit(register)', function (data) {
                register();
                return false;
            });

        });
    </script>



</body>

</html>